<template>
  <page-header-wrapper>
    <a-card>
      <a-form>
        <div class="flex mb-5">
          <a-input placeholder="请输入项目地址、客户名称、贷款顾问" style="width:30%" v-model="keyWord" />
          <a-button style="margin-left:20px;" type="primary" @click="query">查询</a-button>
        </div>
      </a-form>
      <a-table
        rowKey="id"
        :columns="columns"
        :data-source="data"
        :pagination="pagination"
        @change="sorterFun"
        :scroll="{ x: 1300, y: 400 }"
      >
        <span slot="agreementDate" slot-scope="agreementDate"> {{ humanizeDate(agreementDate) }}</span>
        <span slot="contractDate" slot-scope="contractDate"> {{ humanizeDate(contractDate) }}</span>
        <span slot="principal" slot-scope="principal"> {{ moneyType(principal) }}</span>
        <span slot="totalLoan" slot-scope="totalLoan"> {{ moneyType(totalLoan) }}</span>
        <span slot="delay" slot-scope="_, record">
          <a @click="delay(record)">设置</a>
        </span>
        <span slot="add" slot-scope="_, record">
          <a @click="add(record)">设置</a>
        </span>
        <span slot="operation" slot-scope="_, record">
          <a @click="operation(record)" @update="getData">操作</a>
        </span>
      </a-table>
    </a-card>
  </page-header-wrapper>
</template>
<script>
import { getProject } from '@/api/common'
import moment from 'moment'
const columns = [
  {
    title: '项目编号',
    dataIndex: 'projectNum',
    key: 'projectNum',
    fixed: 'left',
    width: 130
  },
  {
    title: '项目地址',
    dataIndex: 'addr',
    key: 'addr',
    sorter: true,
    sortDirections: ['ascend'],
    fixed: 'left',
    width: 110
  },
  {
    title: '客户名称',
    dataIndex: 'clientName',
    key: 'clientName',
    sorter: true,
    sortDirections: ['ascend'],
    width: 110
  },
  {
    title: '贷款顾问',
    dataIndex: 'sysUserName',
    key: 'sysUserName',
    sorter: true,
    sortDirections: ['ascend'],
    width: 110
  },
  {
    title: '总金额',
    dataIndex: 'totalLoan',
    key: 'totalLoan',
    scopedSlots: { customRender: 'totalLoan' }
  },
  {
    title: '承诺金额',
    dataIndex: 'principal',
    key: 'principal',
    scopedSlots: { customRender: 'principal' }
  },
  {
    title: '货币',
    dataIndex: 'currency',
    key: 'currency'
  },
  {
    title: '初步协议签订日期',
    dataIndex: 'agreementDate',
    key: 'agreementDate',
    scopedSlots: { customRender: 'agreementDate' },
    sorter: true,
    sortDirections: ['ascend'],
    width: 170
  },
  {
    title: '合同签订日期',
    dataIndex: 'contractDate',
    key: 'contractDate',
    scopedSlots: { customRender: 'contractDate' },
    width: 130
  },
  {
    title: '延期',
    dataIndex: 'delay',
    key: 'delay',
    scopedSlots: { customRender: 'delay' },
    fixed: 'right'
  },
  {
    title: '加贷',
    dataIndex: 'add',
    key: 'add',
    scopedSlots: { customRender: 'add' },
    fixed: 'right'
  }
]
export default {
  name: 'Agreement',
  data() {
    return {
      data: [],
      keyWord: '',
      columnKey: '',
      pagination: {
        total: 1,
        pageSize: 10
        // onChange: this.getData
      },
      sorterList: [
        { text: 'addr', value: 1 },
        { text: 'clientName', value: 2 },
        { text: 'sysUserName', value: 3 },
        { text: 'agreementDate', value: 5 }
      ]
    }
  },
  computed: {
    columns() {
      if (this.$auth('agreementList.update')) {
        return [
          ...columns,
          {
            title: '操作',
            dataIndex: 'operation',
            key: 'operation',
            scopedSlots: { customRender: 'operation' },
            fixed: 'right'
          }
        ]
      } else {
        return columns
      }
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    query() {
      this.getData()
    },
    delay(record) {
      this.$router.push({ name: 'delay', query: { id: record.id } })
    },
    add(record) {
      this.$router.push({ name: 'add', query: { id: record.id } })
    },
    operation(record) {
      this.$router.push({ name: 'operation', query: { id: record.id } })
    },
    humanizeDate(v) {
      if (v) {
        return moment(v * 1000).format('YYYY-MM-DD') || '--'
      } else {
        return '-'
      }
    },
    moneyType(v) {
      return `${v}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
    },
    sorterFun(pagination, filters, sorter) {
      this.columnKey = this.sorterList.find(el => el.text == sorter.columnKey)?.value
      this.getData(pagination.current)
    },
    async getData(page = 1) {
      var _form = {
        page,
        limit: this.pagination.pageSize,
        approve: 2,
        asseApprove: 2,
        nzApprove: 2,
        dataType: 2
      }
      if (this.keyWord) {
        _form.keyWord = this.keyWord
      }
      if (this.columnKey) {
        _form.orderType = this.columnKey
      }
      const res = await getProject(_form)
      const data = res.result.data
      this.pagination.total = data.total
      const _data = data.list
      _data.forEach(el => {
        el.totalLoan = el.loanData.totalLoan
        el.principal = el.loanData.principal
        el.currency = el.loanData.currency
      })
      this.data = _data
    }
  }
}
</script>
<style scoped></style>
